import { Component } from 'react'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import Child from '../child/child'
import './parent.less'
import { getData, setData } from '../../../utils/utils'
import BackImg from '../../../images/back.jpg'

export default class Parent extends Component {

  state = {
    info: undefined,
    showBottomBar: true,
    list: [{ name: 'Raini', age: 6 }, { name: 'lyx', age: 16 },]
  }

  componentDidMount() {
    getData()
    let id = Taro.getCurrentInstance().router.params.id
    console.log("路由传值 ---> id:" + id)
    this.setState({
      info: {
        name: 'liyongxiang',
        age: 10
      }
    })
  }

  deleteCard() {
    console.log("Parent deleteCard log")
  }

  bottomBar() {
    return (
      <View>
        <Text>我是底部Bar</Text>
      </View>
    )
  }

  spotClick() {
    Taro.redirectTo({
      url: 'pages/demo/spot/spot'
    })
  }

  eventClick() {
    Taro.navigateTo({
      url: 'pages/demo/event/event'
    })
  }

  constantClick() {
    Taro.navigateTo({
      url: 'pages/demo/constant/constant'
    })
  }

  render() {

    let tt = "TT是Tiktok的意思"
    let { list } = this.state

    return (
      <View >
        <Text>Parent</Text>
        <Child tt={tt} info={this.state.info} onDeleteCard={this.deleteCard} />
        <Text className='tip'>*** 注意：这里传递函数的方法要以on开头，不以on开头在h5中可以，但是在小程序中不可以。***</Text>
        {/* <Image src={require('../../../images/back.jpg')} /> */}
        <Image src={BackImg} />
        {!this.state.showBottomBar || this.bottomBar()}
        {
          list.map((item, index) => {
            return (
              <View key={index}>
                <Text>{item.name + "  " + item.age}</Text>
              </View>
            )
          })
        }
        <View className='container'>
          <Text className='itemContainer' onClick={this.spotClick.bind(this)}>插槽组件的用法</Text>
          <Text className='itemContainer' onClick={this.eventClick.bind(this)}>事件</Text>
          <Text className='itemContainer' onClick={this.constantClick.bind(this)}>环境变量</Text>
        </View>
      </View>
    )

  }

}
